<template>
  <div id="app">
    <div>
      <div id="map" style="width: 700px; height: 500px; display: inline-block">
        <Map></Map>
      </div>
      <div style="width: 700px; height: 500px; display: inline-block">
        <Bubble></Bubble>
      </div>
    </div>

    <div style="width: 500px; height: 500px;display: inline-block">
      <Move></Move>
    </div>
<div style="width: 400px; height: 400px;display: inline-block;"></div>
    <div style="width: 500px; height: 500px;display: inline-block">
      <Bar></Bar>
    </div>
  </div>
</template>

<script>
import Map from "./components/map.vue";
import Bar from "./components/bar.vue";
import Bubble from "./components/bubble.vue";
import Move from "./components/move.vue";
export default {
  name: "App",
  components: {
    Map,
    Bar,
    Bubble,
    Move,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}
</style>
